<template>
  <el-card class="box-card" style="width: 100%">
    <template #header>
      <div class="card-header">
        <span>发布流程</span>
      </div>
    </template>
    <el-table :data="issueData" style="width: 100%">
      <el-table-column prop="id" label="流程id" width="180" />
      <el-table-column prop="name" label="流程事件名称" width="180" />
      <el-table-column prop="deployId" label="部署id" />
      <el-table-column prop="flowKey" label="流程key" />

      <el-table-column prop="deployDate" label="部署时间" />

      <el-table-column prop="version" label="部署最新版本" />
      <el-table-column prop="suspensionState" label="状态" />
      <el-table-column  label="流程图" width="100%" >
        <template #default="scope">
          <el-button text type="success" @click="flowSelect(scope.row)">查看流程图</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" >
        <template #default="scope">
          <el-button type="primary" plain @click="issueFlow(scope.row)">发布流程</el-button>
        </template>


      </el-table-column>
    </el-table>
  </el-card>
  <ImgDeploy v-model:dialogVisibleIMG="dialogVisibleIMG" ></ImgDeploy>
  <DrawerLssue v-model:drawerLssue="drawerLssue"></DrawerLssue>
</template>
<script lang="ts" setup>
import DrawerLssue from "../flowable/submit_window/DrawerIssue.vue"
import ImgDeploy from "../flowable/submit_window/ImgDialog.vue";
import {h, onBeforeMount, ref, watch} from "vue";
import axios from "axios";
import {ElNotification} from "element-plus";
//提示框
const open1 = (title,content) => {
  ElNotification({
    title: title,
    message: h('i', { style: 'color: teal' }, content),
  })
}
// 查询流程图的事件
const  flowSelect=(data)=>{
  const id =data.deployId
  console.log(data)
  const url = `http://localhost:9899/deploy/queryFlow/${id}`;
  axios.get(url).then((ref)=>{
    if(ref.data.data ==null){
      open1("流程图","该流程没有流程图")
    }else{
      let data = {
        img : true,
        imageFlow: 'data:image/png;base64,'+ref.data.data,
        ifelse:1
        ,tetle:"部署图片"
      }
      // dialogVisibleIMG.value.imageFlow = 'data:image/png;base64,'+ref.data.data;
      // dialogVisibleIMG.value.img = true;
      dialogVisibleIMG.value = data
      console.log(dialogVisibleIMG)
    }
  })
}
// 这是流程图和xml的对象
let dialogVisibleIMG = ref({
  img :false
  ,  imageFlow:"",
  ifelse :0

})
watch(dialogVisibleIMG, (val, old) => {
  dialogVisibleIMG.value = val
})
const drawerLssue = ref({
  dialogVisible :true
})
//绑定监听对象用来检测子父传值的
watch(drawerLssue,(val,old)=>{
  drawerLssue.value = val;
})

//刷新标签之前的生命周期
onBeforeMount(()=>{
  issueDeployAll();
})
//  发布流程
const issueFlow = (data)=>{
  drawerLssue.value =  {
    dialogVisible: true ,
    data:data
  };
}

const issueData =ref([])
//查询最新版本流程部署
function issueDeployAll(){
  const url =  "http://localhost:1688/issue/issueDeploy";
  axios.get(url).then((ref)=>{
    console.log(ref.data.data)
    issueData.value =ref.data.data
  })
}

</script>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>
